<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title> 
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/top.css">
    <link rel="stylesheet" href="css/body.css">
    <link rel="stylesheet" href="css/rightbar.css">
    <link rel="stylesheet" href="css/list.css">
</head>
<body>
    
<div class="head-note">风险提示：近期有不法分子以商品质量为由，致电客户主动要求退款，套取卡号及密码，诈骗钱财，请您保持警惕，保护好个人信息，谨防诈骗。</div>

<!-- 顶部     -->
<div class="head-top-wrap">
    <div class="head-top"> 

        <div class="top-left">
            <a href="index.html" target="_blank">邮乐首页</a>
        </div>

        <div class="top-right">
            <div class="welcome"><span>xxx</span>您好，欢迎来到邮乐网！<em>退出</em></div>
            <div class="login">
                <a href="login.html" class="blue t-login">[请登录]</a>
                <a href="register.html" class="blue t-reg">[免费注册]</a>
            </div>
            <div ></div>

            <div class="myul menu dropdown" data-active="menu">
                <a class="txt-down dropdown-toggle" href="" target="_blank">我的邮乐</a>
                <ul class="dropdown-layer dropdown-left">
                    <li><a href="###" target="_blank" class="menu-item">我的订单</a></li>
                    <li><a href="###" target="_blank" class="menu-item">我的收藏</a></li>
                    <li><a href="###" target="_blank" class="menu-item">我的消息</a></li>
                </ul>
            </div>

            <div class="ulephone menu dropdown" data-active="menu">
                <span class="ico-phone"></span>
                <a class="txt-down dropdown-toggle" target="_blank">手机邮乐</a>
                <div class="uleapp dropdown-layer dropdown-left">
                    <div class="img-wrap">
                        <img src="images/uleapp.jpeg" alt="手机邮乐">
                    </div>
                </div>
            </div>

            <!-- 全部商品分类 -->
            <div class="category">
                <span class="icon_list"></span>
                <a href="list.html" target="_blank">全部商品分类</a>
            </div>
            <div class="allCategory" id="allCategory" >
                <div class="allCategory_box">
                    <ul class="allCategory_main clear">
                    <li>
                        <h4> 
                            <a>美妆洗护</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>美发护发</a><a>面部护肤</a><a>女性护理</a><a>香水彩妆</a><a>口腔护理</a><a>香水</a><a>身体护理</a><a>洗浴用品</a>
                        </p>
                    </li>
                    <li>
                        <h4> 
                            <a>女装、饰品、配件</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>帽子</a><a>衬衫</a><a>连衣裙</a><a>针织衫毛衣</a>
                            <a>短外套</a>
                            <a>文胸</a>
                            <a>女袜</a>
                            <a>丝巾/围巾/手套</a>
                            <a>镶嵌饰品</a>
                            <a>金银饰品</a>
                            <a>戒指</a>
                            <a>耳饰</a>
                            <a>项链</a>
                            <a>手镯手链</a>
                            <a>头饰/胸针</a>
                            <a>太阳镜/眼镜框</a>
                            <a>手表</a>
                            <a>女士腰带</a>
                            <a>男士腰带</a>
                            <a>T恤</a>
                            <a>打底衫</a>
                            <a>卫衣</a>
                            <a>小西装</a>
                            <a>风衣/大衣</a>
                            <a>羽绒服</a>
                            <a>牛仔裤</a>
                            <a>休闲裤</a>
                            <a>打底裤/短裤</a>
                            <a>半裙</a>
                            <a>保暖内衣</a>
                            <a>睡衣/家居服</a>
                            <a>女士内裤</a>
                            <a>吊带/背心</a>
                        </p>
                    </li>
                    <li>
                        <h4> 
                            <a>家居生活</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>家纺</a>
                            <a>生活日用</a>
                            <a>家纺日用</a>
                            <a>家居用品</a>
                            <a>五金装潢</a>
                            <a>家装建材</a>
                            </p>
                        </li>
                        <li>
                            <h4> 
                                <a>汽车用品</a> 
                                <a class="more">more</a> 
                            </h4>
                            <p>
                                <a>行车记录仪</a>
                                <a>润滑油</a>
                                <a>座垫/座套</a>
                                <a>维修配件</a>
                                <a>内饰</a>
                                <a>脚垫</a>
                                <a>除味</a>
                                <a>美容</a>
                                <a>添加剂</a>
                                <a>4S服务</a>
                            </p>
                    </li>
                    <li>
                        <h4>
                            <a>特色美食</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>休闲零食</a>
                            <a>饮料冲调</a>
                            <a>冲调食品</a>
                            <a>厨房调料</a>
                            <a>酒</a>
                            <a>特供礼盒</a>
                            <a>进口食品</a>
                            <a>营养滋补</a>
                            </p>
                    </li>
                    <li>
                        <h4>
                            <a>魅力男装</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>衬衫</a>
                            <a>T恤/POLO衫</a>
                            <a>牛仔裤</a>
                            <a>夹克/外套</a>
                            <a>男士内裤</a>
                            <a>休闲裤</a>
                            <a>西装</a>
                            <a>棉服</a>
                            <a>羽绒服</a>
                            <a>西裤</a>
                            <a>针织衫</a>
                            <a>毛背心</a>
                            <a>卫衣</a>
                            <a>大衣/皮衣</a>
                            <a>保暖内衣</a>
                            <a>睡衣/家居服</a>
                            <a>男袜</a>
                            </p>
                    </li>
                    <li>
                        <h4>
                            <a>厨房清洁</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>清洁剂</a>
                            <a>清洁工具</a>
                            <a>一次性用品</a>
                            <a>锅具水壶</a>
                            <a>精美餐具</a>
                            <a>生活用纸</a>
                            <a>厨具</a>
                            <a>水具酒具</a>
                            <a>浴室用品</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>手机数码</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>手机通讯</a>
                            <a>手机配件</a>
                            <a>摄影摄像</a>
                            <a>数码配件</a>
                            <a>数码影音</a>
                            <a>智能设备</a>
                        </p>
                    </li>
                    <li>
                        <h4> 
                            <a>进口食品</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>进口乳制品</a>
                            <a>进口饼干糕点</a>
                            <a>进口糖果/巧克力</a>
                            <a>进口果干/蜜饯</a>
                            <a>进口食用油</a>
                            <a>进口冲饮/早餐谷物</a>
                            <a>进口冲饮咖啡/茶</a>
                            <a>进口饮用水/饮料</a>
                            <a>进口休闲零食</a>
                            <a>进口米/面</a>
                            <a>进口调味品</a>
                            <a>进口罐头</a>
                            <a>进口酒类</a>运动户外
                            <a>户外服饰</a>
                            <a>户外鞋</a>
                            <a>户外装备</a>
                            <a>运动服饰</a>
                            <a>运动鞋包</a>
                            <a>运动配件</a>
                            <a>运动休闲健身</a>
                            <a>运动器材</a>
                            <a>户外包</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>箱包鞋帽</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>功能箱包</a>
                            <a>时尚女包</a>
                            <a>精品男包</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>电脑办公</a> 
                            <a class="more">商务礼品</a> 
                        </h4>
                        <p>
                            <a>电脑整机</a>
                            <a>电脑硬件</a>
                            <a>外设产品</a>
                            <a>网络设备</a>
                            <a>游戏设备</a>
                            <a>办公设备</a>
                            <a>文具/耗材</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>家用电器</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>个人护理电器</a>
                            <a>厨房电器</a>
                            <a>生活电器</a>
                            <a>大家电</a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>保健品</a>  
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>增强免疫力/抗疲劳</a>
                            <a>减肥瘦身</a>
                            <a>调节血压/血脂/血糖 </a>
                            <a>养生参茸食材 </a>
                            <a>美容养颜 </a>
                            <a>男/女性调养 </a>
                            <a>儿童营养 </a>
                        </p>
                    </li>
                    <li>
                        <h4>
                            <a>运动户外</a>
                            <a class="more">more</a> 
                        </h4>
                        <p>
                            <a>户外服饰</a>
                            <a>户外鞋</a>
                            <a>户外装备</a>
                            <a>运动服饰</a>
                            <a>运动鞋包</a>
                            <a>运动配件</a>
                            <a>运动休闲健身</a>
                            <a>运动器材</a>
                            <a>户外包</a>
                        </p>
                    </li>
                    <li>
                        <h4> 
                            <a>母婴玩具</a> 
                            <a class="more">more</a> 
                        </h4>
                        <p>
                                <a>奶粉</a>
                                <a>尿裤湿巾</a>
                                <a>玩具书籍</a>
                                <a>哺喂用品</a>
                                <a>洗护用品</a>
                                <a>宝宝服饰</a>
                                <a>儿童服饰</a>
                                <a>童车童床</a>
                                <a>妈妈用品</a>
                                <a>出行用品</a>
                                <a>图书音像</a>
                        </p>
                    </li>
                </ul>
                <p class="allCategory_side">
                    <a >邮乐农品</a>
                    <a class="s2">手机充值</a>
                    <a>生活缴费</a>
                    <a class="s2">海外馆</a>
                </p>
                </div>
            </div>

            <div class="web-map">
                <a href="" target="_blank">网站地图</a>
            </div>

            <div class="helpcenter menu dropdown" data-active="menu">
                <a class="txt-down dropdown-toggle" href="" target="_blank">帮助中心</a>
                <ul class="dropdown-layer dropdown-left">
                    <li><a href="" target="_blank" class="menu-item">购物指南</a></li>
                    <li><a href="" target="_blank" class="menu-item">支付帮助</a></li>
                    <li><a href="" target="_blank" class="menu-item">配送方式</a></li>
                    <li><a href="" target="_blank" class="menu-item">售后服务</a></li>
                    <li><a href="" target="_blank" class="menu-item">关于邮乐</a></li>
                </ul>
            </div> 

            <div class="telphone">
                <span class="phone">11185</span>
                <p class="phonetips"></p>
            </div>
        </div>
    </div>
</div>

<!-- 头部 -->
<div class="header">
    <div class="head-logo">
        <a href="" class="logo-ule">邮乐网</a>
    </div>
    
    <div class="head-shopcart">
        <a href="cart.html">
            <span class="shopcart-sum" style="display:block;">
                购物车
                <span class="shopcart-num">0</span>
            </span>
            <s></s>
        </a>
        <ul class="shopcart-list"><li class="list-empty">您购物车里还没有任何宝贝，快来挑选吧</li></ul>
    </div>
 
    <div class="head-search">
        <form id="headerSearch" name="headerSearch">
            <input type="text" name="keywords" class="txt-keyword">
            <button type="submit" class="btn-search">搜索</button>
        </form>
        <ul class="search-suggest"></ul>
        <p class="search-hotkeys">
            <a><font color="red">精准扶贫</font></a> 
            <a><font color="red">中国集邮</font></a> 
            <a>新鲜水果</a> 
            <a>奶粉</a> 
            <a>潮流女鞋</a> 
            <a>洗发护发</a> 
            <a>剃须刀</a> 
            <a>坚果炒货</a> 
            <a>纸巾</a>
        </p>
    </div>
</div>

<!-- 导航 -->
<div class="head-nav">
    <div class="nav">
        <div class="category-list">
                <a>全部商品分类</a>
        </div>

        <ul class="navlinks">
            <li class="li-special">
                <a class="nav-special">天天特卖</a>
            </li>
            <li class="li-coupon">
                <a class="nav-coupon">优惠券</a>
            </li> 
            <li class="li-board">
                <a class="nav-board">海外馆</a>
            </li>       
            <li class="li-ulenp">
                <a class="nav-ulenp">邮乐农品</a>
            </li>
            <li class="li-life">
                <a class="nav-life">生活缴费</a>
            </li>
            <li class="li-trip">
                <a class="nav-trip">邮乐旅行</a>
            </li>
            <li class="li-tehui">
                <a class="nav-tehui">邮特惠</a>
            </li>
            <li class="li-jf">
                <a class="nav-tehui">邮惠购积分</a>
            </li>
        </ul>

    </div>
</div>



<!-- 商品列表 -->
<div class="goodsList">
    <!-- <div class="goods-wrap"> -->

        <!-- <div class="box">
            <a href="details.html">
                <p class="goodsimg"></p>
                <p class="goodsname"></p>
                <p class="goodsPrice">
                    <span class="newPrice"></span>
                    <span class="oldPrice"></span>
                </p>
                <p class="shop_area">
                    <a href="###" target="_blank">爱家生活馆专营店</a>
                    <span class="xiaoneng">
                        <em class="online"></em>
                    </span>
                    <a class="area" href="###">北京</a>
                </p>
                <div class="pingfen">
                    <span class="tit">店铺评分：4.9</span>
                    <span>描述相符：4.8</span>
                    <span>服务态度：5.0</span>
                    <span>发货速度：5.0</span>
                </div> 
            </a>
        </div> -->


    <!-- </div> -->
</div>




<!-- 底部 -->
<div class="footer-wrap">
    <div class="footer">
        <div class="foot-banner">
            <a class="foot-banner-post">中国邮政</a>
            <a class="foot-banner-tom">TOM</a>
            <a class="foot-banner-commitment">品质保障 优选邮乐</a>
            <a class="foot-banner-free">覆盖城乡 安全速达</a>
        </div>

        <div class="foot-helper">
            
        </div>

        <div class="foot-license">
            <ul>
                <li>酒类商品零售许可证：浦市监酒零字 第 JY13101150070309-JL 号</li>
                <li>食品经营许可证：JY13101150070309</li>
                <li>统一社会信用代码：913100006916203638</li>
            </ul>
        </div>
        <div class="foot-copyright">
            <a style="color:#999">沪公网安备 31011502009005号</a>
            <span class="sep">|</span>
            沪ICP备 13037728号
            <span class="sep">|</span>
            (沪)网械平台备字[2020]第00009号
            <span class="sep">|</span>
            Copyright 2009-2020, 版权所有上海邮乐网络技术有限公司 ULE.COM
        </div>
        <div class="foot-iconlink">
            <a><b>中国邮政</b></a> 
            <a><b>TOM</b></a>
            <a><b>可信网站</b></a>
            <a><b>EMS</b></a>
            <a><b>中国邮政储蓄银行</b></a>
            <a><b>不良信息举报中心</b></a> 
            <a><b>上海网警网络110</b></a>
            <a><b>上海工商</b></a>
            <a><b>诚信网站</b></a>
        </div>

    </div>
</div>

<!-- 右边长条 -->
<div class="bar-wrap">
    <div class="rightBar">
        <!-- 上面两个 -->
        <div class="topTwo">
            <div class="bar-one bar-tab">
                <div class="bar-item bar-category">
                    <span class="bar-logo">
                        <i></i><em></em>
                    </span>
                    <span class="bar-tips">商品分类</span>
                </div>
            </div>
            <div class="bar-two bar-tab">
                <div class="bar-item bar-qrcode">
                    <span class="bar-logo">
                        <i></i><em></em>
                    </span>
                    <span class="bar-tips">二维码</span>
                </div>
            </div>
        </div> 
        <!-- 中间四个 -->
        <div class="centerFour">
            <div class="bar-three bar-tab">
                <div class="three-my bar-item">
                    <span class="bar-logo" style="display:block;">
                        <i></i><em></em>
                    </span>
                    <span class="bar-tips">我的邮乐</span>
                </div>
            </div>
            <div class="bar-four bar-tab">
                <a href="cart.html">
                    <div class="four-cart bar-item">
                        <span class="bar-logo" style="display:block;">
                            <i></i><em>0</em>
                        </span>
                        <span class="bar-tips">购物车</span>
                    </div>
                </a>
            </div>
            <div class="bar-five bar-tab">
                <div class="five-money bar-item">
                    <span class="bar-logo" style="display:block;">
                        <i></i><em></em>
                    </span>
                    <span class="bar-tips">优惠券</span>
                </div>
            </div>
            <div class="bar-six bar-tab"> 
                <div class="six-foot bar-item">
                    <span class="bar-logo">
                        <i></i><em>0</em>
                    </span>
                    <span class="bar-tips">我的足迹</span>
                </div>
            </div>            
        </div>
        <!-- 底部 -->
        <div class="bar-tab bar-bottom" style="display: block;" status="show">
            <div class="bar-item gotop">
                <span class="bar-logo" style="display:block;">
                    <i></i><em></em>
                </span>
                <span class="bar-tips">回到顶部</span>
            </div>
        </div></div>
    </div>
</div> 



<script src="js/jquery.2.2.4.js"></script>
<script src="js/commodity-list.js"></script>
<script src="js/drop-down menu.js"></script>
<script src="js/index.js"></script>
<script src="js/list.js"></script>
<script src="../ajax2.0.js"></script>
<script src="../cookie.js"></script>
 

<script>

    // 初始获取本地存储的数据
    var userData = sessionStorage.getItem("userState");
    userData = userData ? JSON.parse(userData) : userData; 
    
    // 判断本地的数据状态，是否为登录成功，显示对应信息
    if(userData && userData.state === 1 ){
        $(".login").hide();

        $(".welcome").append("<span></span>");
        $(".welcome").children("span").text(userData.user);
    }

    // 点击注销，修改登录成功后的状态
    $(".welcome").find("em").click(function(){
        // userData.state = 0;
        // sessionStorage.setItem("userState",JSON.stringify(userData));
        sessionStorage.removeItem("userState");
        location.reload();
    })


    class List{
        constructor(){
            this.goods = $(".goodsList");
            this.url = "http://localhost:8080/api";

            //开启ajax
            this.load();

            // this.addEvent();
        }
        load(){
            $.ajax({ 
                url:this.url,
                data:{
                    type:"goods"
                },
                success:res=>{
                    // console.log(res);
                    this.res = res;
                    this.render();
                },
                dataType:"json"
            })
        }
        render(){  
            let str = "";
            this.res.forEach(item => {
                // 给每个商品添加链接，点击商品时，跳转到详情，并在url后携带当前商品的id值
                str += `<div class="goods-wrap"><div class="box"><a href="details.html?id=${item.goodsId}">
                <p class="goodsimg"><img class="listimg" src="https://dummyimage.com/600x400/ccc/fff" data-src="images/goodspic/${item.good_pic}"></p>
                <p class="goodsname">${item.name}</p>
                <p class="goodsPrice">
                    <span class="newPrice">${item.d_price}</span>
                    <span class="oldPrice">${item.o_price}</span>
                </p>
                <p class="shop_area">
                    <a href="###" target="_blank">${item.shop_name}</a>
                    <span class="xiaoneng">
                        <em class="online"></em>
                    </span>
                    <a class="area" href="###">${item.address}</a>
                </p>
                <div class="pingfen">
                    <span class="tit">店铺评分：${item.shop_score}</span>
                </div> 
            </a>
        </div></div> `;
            });
            this.goods.html(str);

            //懒加载
            var aimg = document.querySelectorAll(".listimg");
            // console.log(aimg);

            var arr = Array.from(aimg);

            var clientH = document.documentElement.clientHeight;

            function fn(){
                var scrollT = document.documentElement.scrollTop; 
                // 遍历所有需要懒加载的图片
                for(var i=0;i<arr.length;i++){
                    if(scrollT + clientH > arr[i].offsetTop - 100){
                        arr[i].src = arr[i].getAttribute("data-src");
                        arr.splice(i, 1);
                        i--;
                    }
                }
            }
            fn();


            
            var j = 0;      
            onscroll = function(){
                j++;   
                if(j%10 == 0){
                    fn();
                }
            }
        }  
    }
    new List();

    // <span>描述相符：${item.descible_score}</span>
    // <span>服务态度：${item.server_score}</span>
    // <span>发货速度：${item.send_score}</span>














</script>


</body>
</html>